<template>
  <div class="orderList">
    <div class="orderItem" v-for="(item, index) in goodsList" :key="index">
      <div class="type">{{ item.F_wlfz }}</div>
      <el-Space size="large" wrap>
        <GoodsBox
          :goods-info="i"
          :reset="reset"
          v-for="i in item.data"
          :key="i.FBillNo + Math.random()"
        >
          <template #content>
            <div
              class="infoCard"
              :style="{ background: i.F_TEZV_JHSL >= i.FQty ? '#86b04e' : '#88a4bb' }"
            >
              <div class="first" :title="i.FMaterialName">{{ i.FMaterialName }}</div>
              <div class="first">{{ i.FQty }}{{ i.FUnitName }}</div>
              <div class="third">
                <div></div>
                <div>已称重：{{ i.F_TEZV_JHSL }}{{ i.FUnitName }}</div>
              </div>
            </div>
          </template>
        </GoodsBox>
      </el-Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import GoodsBox from '../components/goodsBox.vue'
const { goodsList, reset } = defineProps<{
  goodsList?: {
    [x: string]: any
    data: GoodsTypes.goodsOrderInfo[]
  }[]
  reset: (item: string) => void
}>()
</script>

<style scoped lang="less">
.orderList {
  .orderItem {
    .type {
      font-size: 18px;
      color: #8994b6;
      line-height: 25px;
      margin-bottom: 10px;
    }
    .infoCard {
      padding: 10px;
      color: #fff;
      .first {
        font-size: 32px;
        font-weight: 500;
        line-height: 41px;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .third {
        font-size: 14px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
      }
    }
  }
}
</style>
